<template>
  <div id="app">
    
    <a-row type="flex" class="menus">
      <a-button-group>
        <template v-for="demo in demoList">
          <a-button :type="demo.name === curDemo ? 'primary' : 'info'" @click="curDemo = demo.name" :key="demo.name">
            {{ demo.title }}
          </a-button>
        </template>
      </a-button-group>
    </a-row> 
    
    <keep-alive :include='keepInclude' :max="10">
      <component :is="curDemo"/>
    </keep-alive>
	
  </div>
</template>

<script>

import printDesign from '@/demo/design/index'
import purchase from '@/demo/purchase/index'
import sales from '@/demo/sale/index'
import tasks from '@/demo/tasks/index'
import production from '@/demo/production/index'
import allocation from '@/demo/allocation/index'
import invoice from '@/demo/invoice/index'
export default {
  name: 'App',
  
  components: {printDesign, purchase,sales,tasks,production,allocation,invoice},
  data() {
    return {
      curDemo: 'printDesign',
      keepInclude: 'printDesign,purchase,sales,tasks,production,allocation,invoice',
      demoList: [
        {name: 'printDesign', title: '默认拖拽设计'},
        {name: 'purchase', title: '采购入库模板'},
		{name: 'sales', title: '销售出库模板'},
        {name: 'tasks', title: '销售结算模板'},
		{name: 'production', title: '生产加工模板'},
		{name: 'allocation', title: '库存调拨模板'},
		{name: 'invoice', title: '发票模板'},
      ]
    }
  },
}
</script>

<style lang="less">
.logos {
  padding: 6px 24px;
  display: flex;
  justify-content: center;
  align-self: center;

  img {
    height: 40px;
    width: 40px;
  }
}

.menus {
  padding: 10px 24px;
}

// hiprint 拖拽图片
.hiprint-printElement-image-content {
  img {
    content: url("~@/assets/logo.png");  //body内显示的图片
  }
}
</style>
